<template>
  <div class="add">
    <div class="container">
      <div class="main">
        <p class="title">人员信息</p>
        <Form
          ref="formValidate"
          :model="formValidate"
          :rules="ruleValidate"
          :label-width="90"
          class="box"
        >
          <FormItem prop="userName" label="姓名：">
            <Input
              v-model.trim="formValidate.userName"
              placeholder="请输入登录账号"
              style="width: 500px"
              maxlength="16"
            ></Input>
          </FormItem>
          <FormItem prop="userName" label="性别：">
            <Input
              v-model.trim="formValidate.userName"
              placeholder="请输入登录账号"
              style="width: 500px"
              maxlength="16"
            ></Input>
          </FormItem>
          <FormItem prop="phone" label="手机号：">
            <Input
              v-model.trim="formValidate.phone"
              placeholder="请输入用户手机号"
              number
              style="width: 500px"
              autocomplete="off"
              id="phone"
              maxlength="11"
            />
          </FormItem>
          <FormItem prop="nickName" label="身份证号：">
            <Input
              v-model.trim="formValidate.nickName"
              placeholder="请设置用户昵称"
              style="width: 500px"
              maxlength="10"
            ></Input>
          </FormItem>
          <!-- 是否开启 -->
          <FormItem label="是否开启：">
            <iSwitch v-model="switch1" size="large">
              <span slot="open">启用</span>
              <span slot="close">禁用</span>
            </iSwitch>
          </FormItem>
        </Form>
      </div>
      <div style="border-top: 1px dashed #999; margin-right: -32px"></div>
      <div style="width: 100%px; text-align: center; padding: 20px 0px">
        <Button
          type="primary"
          @click="save('formValidate')"
          :disabled="disabledSave"
          style="width: 75px; height: 35px"
        >
          <Icon type="ios-checkmark" style="margin-right: 5px" />提交
        </Button>
        <Button @click="back" style="width: 75px; height: 35px">
          <i
            class="iconfont icon-butongyi"
            style="font-size: 14px; margin-right: 5px"
          ></i
          >取消
        </Button>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      formValidate: {
        userName: "",
        //密码
        passWord: "",
        // 用户昵称
        nickName: "",
        phone: "",
        identityAdd: 5,
        identityAddCoding: "",
      },
    };
  },
  methods:{
    back(){
        this.$emit('showaddModal');
    }
  }
};
</script>
<style lang="less" scoped>
.eye {
  width: 22px;
  height: 22px;
  margin: 0 0 0 -32px;
  position: relative;
  // z-index: 9999;
}
.demo-upload-list {
  display: inline-block;
  width: 60px;
  height: 60px;
  text-align: center;
  line-height: 60px;
  border: 1px solid transparent;
  border-radius: 4px;
  overflow: hidden;
  background: #fff;
  position: relative;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
  margin-right: 4px;
}
// 关闭input文本框自动填充背景色黄色
input:-webkit-autofill {
  box-shadow: 0 0 0px 1000px white inset !important;
}
.demo-upload-list img {
  width: 100%;
  height: 100%;
}
.demo-upload-list-cover {
  display: none;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.6);
}
.demo-upload-list:hover .demo-upload-list-cover {
  display: block;
}
.demo-upload-list-cover i {
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  margin: 0 2px;
}
.w-select {
  width: 105px;
}
.w-select-hos {
  width: 180px;
}
.w-select-identity {
  width: 150px;
}
.add {
  width: 100%;
  background: #ffffff;
  box-sizing: border-box;
  .container {
    width: 100%;
    margin: 0 auto;
    .main {
      width: 98%;
      display: flex;
      flex-direction: column;
      margin: 10px auto;
      border: 1px solid #f0f0f0;
      box-shadow: 0 4px 3px #ebedf8;
      border-radius: 5px;
      margin-bottom: 20px;
      .title {
        font-size: 20px;
        padding-left: 15px;
        margin-bottom: 20px;
        color: #333;
        height: 40px;
        line-height: 40px;
        background: #ebedf8;
      }
      .box {
        // padding: 0 50px;
      }
    }
  }
}
</style>

